<!--  -->
<template>
  <div class="showDataPanel">
    <date-switching-component @getData="getData"/>
    <el-table class="tableView"  :expand-row-keys="expands" :row-key="getRowKeys" :data="dataList"
              @expand-change="expandColumn">
      <el-table-column type="expand" align="center">
        <template #default="props">
          <div class="tableColumnView">
            <historical-data-echarts-panel ref="DailyDosageStatisicsBar" class="echartsView"/>
            <el-table :data="props.row.dataList">
              <template v-for="(column,index) in tableColumn.tableChilder" :key="index">
                <el-table-column v-if="tableColumn|setTrueOrFalse"
                                 :prop="column.propData"
                                 :label="column.name"
                                 align="center">
                  <template v-if="column.children.length>0">
                    <el-table-column v-for="(childrenColumn,childrenIndex) in column.children" :key="childrenIndex"
                                     :prop="childrenColumn.propData"
                                     :label="childrenColumn.name" align="center">
                    </el-table-column>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </div>
        </template>
        <template #header>
          <el-popover
              placement="bottom"
              trigger="click"
              :visible="visible">
            <transition name="fade">
              <div class="elPopover">
                <div>选择显示字段</div>
                <div>
                  <el-checkbox v-for="(checkColumn,index) in tableColumn.showCheckbox"
                               :key="index" v-model="tableColumn.showColumn[checkColumn.data]">{{ checkColumn.name }}
                  </el-checkbox>
                </div>
              </div>
            </transition>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="visible = false">取消</el-button>
              <el-button size="mini" type="primary" plain @click="saveColumn">确定</el-button>
            </div>
            <template #reference>
              <svg-icon icon-class="set" class="setSvg" @click="visible = true"/>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column v-for="(column,index) in tableColumn.table" :key="index" :prop="column.propData"
                       :label="column.name"
                       align="center">
        <template #default="scope" v-if="column.name=='状态'">
          {{ scope.row.status === 1 ? "正常" : "异常" }}
        </template>
        <template v-if="column.children.length>0">
          <el-table-column v-for="(childrenColumn,childrenIndex) in column.children" :key="childrenIndex"
                           :prop="childrenColumn.propData"
                           :label="childrenColumn.name" align="center">

          </el-table-column>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import DateSwitchingComponent from "@/components/DateSwitchingComponent.vue";
import _ from "underscore";

let component;
import moment from 'moment';
import HistoricalDataEchartsPanel from "@/views/data/components/HistoricalDataEchartsPanel.vue";
import {setEchartsData} from '../../../utils/public'

export default {
  filters: {
    setTrueOrFalse(data) {
      console.log(data);
      _.forEach(data.tableChilder, function (item) {
        if (data.showColumn[item.propData]) {
          console.log(data.showColumn[item.propData]);
          return true
        } else {
          return false
        }
      });
    }
  },
  data() {
    return {
      tableColumn: {},
      showChartsData: {},
      dataList: [],
      visible: false,
      queryParams: {
        dateRange: [moment().subtract(1, 'days'), moment()],
        dateType: 'month'
      },
      expands: [], // 只展开一行放入当前行id
      getRowKeys: (row) => { // 获取当前行id
        return row.deviceNo; // 这里看这一行中需要根据哪个属性值是id
      }
    };
  },
  components: {HistoricalDataEchartsPanel, DateSwitchingComponent},
  methods: {
    expandColumn(row, expandedRows) {
      // 每次只展开一行
      if (expandedRows.length) {
        component.expands = []
        if (row) {
          component.expands.push(row.deviceNo);
          component.showChartsData = row.chart;
          setEchartsData(component);
        }
      } else {
        component.expands = []
      }
    },
    saveColumn() {
      //持久化存储
      localStorage.setItem(component.tableColumn.name, JSON.stringify(this.tableColumn.showColumn))
      this.visible = false;
      setEchartsData(component);
    },
    getData(data, type) {
      this.queryParams.dateRange = data;
      this.queryParams.dateType = type;
      this.$emit('getData');
    }
  },
  mounted() {
    component = this;
    //获取持久化存储
    if (localStorage.getItem("columnSet")) {
      component.tableColumn.showColumn = JSON.parse(localStorage.getItem(component.tableColumn.name))
    } else {
      /*this.tableColumn.showColumn = this.tableColumn.showColumn;*/
    }
  }
}

</script>
<style lang='scss'>
.test1 {
}
</style>